<template>
  <div class="personal-data">
    <div class="wrapper">
      <div class="title">管理我的账号</div>
    </div>
    <div class="list">
      <div class="item acea-row row-between-wrapper">
        <div>昵称</div>
        <div class="input">
          <input type="text" v-model="userInfo.nickname" />
        </div>
      </div>

      <div v-if="!userInfo.roomNums">
        <router-link
          :to="'/user/binding'"
          class="item acea-row row-between-wrapper"
        >
          <div>绑定社区</div>
          <div class="input">
            <ms-form-organization v-model="selectedMore2" :organization="currStructure"></ms-form-organization>
            <span class="iconfont icon-xiangyou"></span>
          </div>
        </router-link>
      </div>
      <div class="item acea-row row-between-wrapper" v-else-if="userInfo.roomNums">
        <div>社区</div>
        <div class="input acea-row row-between-wrapper">
          <div class="input acea-row row-between-wrapper">
            <input
              type="text"
              :value="userInfo.roomDesc"
              disabled
              class="id"
            /><span class="iconfont icon-suozi"></span>
          </div>
        </div>
      </div>
    </div>
    <div class="modifyBnt bg-color-red" @click="confirm">保存修改</div>
    <div v-if="userInfo.roomNums"
      class="logOut cart-color acea-row row-center-wrapper"
    ><router-link
            :to="'/user/index'"
            class="item acea-row row-between-wrapper"
    >
      进入小区
    </router-link>
    </div>
  </div>
</template>

<script>
  import MsFormOrganization from '@/components/FormOrganization'
  import * as api from '@/api'
  import { set ,get} from "@/utils/localStock";
  import { allCommunity ,bindCommunity} from "@api/build";
  export default {
    data () {
      return {
        // 单选
        selectedOne: '',
        single: [],
        // 多级联动
        selectedMore1: [],
        selectedMore2: [],
        userInfo: [],
        multiple: [],
        structure: [],
        currStructure: []
      }
    },
    created () {
      this.userInfo=get('userInfo')
      this.allCommunity()
    },
    methods: {
      async confirm() {
        let that = this;
        console.log(this.selectedMore1)
        console.log(this.selectedMore2)
        bindCommunity({ selectedMore2: this.selectedMore2.join(',') })
                .then(res => {
                  set("userInfo", res.userInfo);
                })
                .catch(res => {
                  that.$dialog.error(res.msg);
                });
      },
      allCommunity: function() {
        var that = this;
        if (that.loading) return;
        if (that.status) return;
        allCommunity({ pageNum: that.page, pageSize: that.limit }).then(
                res => {
                  var data = res.data;
                  for (let i = 0; i < data.length; i++) {
                    this.structure.push({
                      value: data[i].code,
                      parentValue: data[i].parentCode,
                      label: data[i].name,
                      nodeData: data[i]
                    })
                  }
                  this.currStructure = this.buildTree(this.structure)
                }
        );
      },


      buildTree (nodes) {
        let len = nodes.length // 节点数量
        let tops = [] // 顶级节点数组，如果只有一个顶级节点，该数组只有一个元素，并且该顶级节点是根节点。
        if (len === 1) return nodes[0]
        tops = nodes.filter((m) => {
          if (!m.parentValue) {
            return m
          } else {
            let hasParent = nodes.find((n) => {
              if (n.value === m.parentValue) {
                if (!n.children) {
                  n.children = []
                }
                n.children.push(m)
                n.leaf = false
                return n
              }
            })
            if (!hasParent) {
              return m
            }
          }
        })
        return tops
      }
    },
    components: {
      MsFormOrganization
    }
  }
</script>

<style lang="less">
</style>
